import React from 'react';
import { Tools, Tabs, Icon } from 'weaver-mobile';
import * as API_HOMEPAGE from '../../../../apis/homepage';
import Loading from '../../Loading';

const getLabel = Tools.getLabel;

class RankingList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      tabs: [],
      tab: {},
      styleType: '',
      data: [],
    };
  }

  componentWillMount() {
    const { tabs } = this.props;
    if (tabs && tabs.length) {
      const tab = tabs[0];
      this.setState({ tabs });
      this.onLoadData(tab);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.refreshing) {
      const { tabs } = nextProps;
      if (tabs && tabs.length) {
        const tab = tabs[0];
        this.setState({ tabs });
        this.onLoadData(tab);
      }
    }
  }

  render() {
    const { loading, tabs = [], tab = {}, styleType, data = [] } = this.state;
    const headdata = data[0] || []; // 第一行作为标题行
    const bodydata = data.slice(1); // 第二行开始作为数据行
    const top3data = bodydata.slice(0, 3); // 排名前3的数据
    const otherdata = bodydata.slice(3); // 排名第4开始的数据

    let tabsCom = null;
    if (tabs && tabs.length > 1) {
      let page = 0;
      for (let i = 0, len = tabs.length; i < len; i++) {
        if (tabs[i].tabid == tab.tabid) {
          page = i;
          break;
        }
      }
      tabsCom = <Tabs tabs={tabs} page={page} renderTabBar={(props) => <Tabs.ExpandTabBar {...props} fix={8} />} onTabClick={(item) => this.onLoadData(item)} />;
    }

    let dataCom = (
      <div className="ranking-list-no-data">
        <Icon type="no-data" size="lg" />
        <div>{getLabel(83553, '暂无数据')}</div>
      </div>
    );

    if (bodydata.length > 0) {
      const colWidth = 100 / (headdata.length + 1) + '%';
      const colgroup = (
        <colgroup>
          <col width={colWidth} />
          {headdata.map((item, index) => (
            <col key={index} width={colWidth} />
          ))}
        </colgroup>
      );
      const thead = (
        <table class="ranking-list-table-head">
          {colgroup}
          <thead>
            <tr>
              <th></th>
              {headdata.map((item, index) => (
                <th key={index}>{item}</th>
              ))}
            </tr>
          </thead>
        </table>
      );
      const tbody = (
        <table className="ranking-list-table-body">
          {colgroup}
          <tbody>
            {otherdata.map((item, index) => (
              <tr key={index}>
                <td>{index + 4}</td>
                {item.map((item, index) => (
                  <td key={index}>{item}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      );

      if (styleType == '1') {
        const tbodytop3 = top3data.map((item, index) => {
          let style = {};
          if (index == 0) {
            style = { border: '1px solid #ffc601', color: '#d7892c' };
          } else if (index == 1) {
            style = { border: '1px solid #9fd7ff', color: '#40a7ff' };
          } else if (index == 2) {
            style = { border: '1px solid #e6aa99', color: '#d0916d' };
          }
          return (
            <table key={index} className="ranking-list-style1-table" style={style}>
              {colgroup}
              <tbody>
                <tr>
                  <td>
                    <img src={`/spa/portal/images/rankinglist/s01-${index + 1}.png`} alt="" />
                  </td>
                  {item.map((item, index) => (
                    <td key={index}>{item}</td>
                  ))}
                </tr>
              </tbody>
            </table>
          );
        });

        dataCom = (
          <div className="ranking-list-data">
            {thead}
            {tbodytop3}
            {tbody}
          </div>
        );
      } else if (styleType == '2') {
        const tbodytop3 = (
          <div className="ranking-list-style2">
            <div className="ranking-list-style2-info" style={{ position: 'relative', top: 20, paddingBottom: 20, width: '30%', border: '2px solid #d1d1d1', color: '#d6d6d6' }}>
              <img src={`/spa/portal/images/rankinglist/s02-2.png`} alt="" />
              <ul>{top3data[1] ? top3data[1].map((item, index) => <li key={index}>{item}</li>) : <li>{getLabel(83553, '暂无数据')}</li>}</ul>
              <div style={{ position: 'absolute', bottom: 18, width: '100%', height: 2, backgroundColor: '#d1d1d1' }}></div>
            </div>
            <div className="ranking-list-style2-info" style={{ width: '1%' }}></div>
            <div className="ranking-list-style2-info" style={{ width: '38%', border: '2px solid #dcad03', color: '#dcad03' }}>
              <img src={`/spa/portal/images/rankinglist/s02-1.png`} alt="" />
              <ul>{top3data[0] ? top3data[0].map((item, index) => <li key={index}>{item}</li>) : <li>{getLabel(83553, '暂无数据')}</li>}</ul>
            </div>
            <div className="ranking-list-style2-info" style={{ width: '1%' }}></div>
            <div className="ranking-list-style2-info" style={{ position: 'relative', top: 40, paddingBottom: 40, width: '30%', border: '2px solid #c2998d', color: '#934731' }}>
              <img src={`/spa/portal/images/rankinglist/s02-3.png`} alt="" />
              <ul>{top3data[2] ? top3data[2].map((item, index) => <li key={index}>{item}</li>) : <li>{getLabel(83553, '暂无数据')}</li>}</ul>
              <div style={{ position: 'absolute', bottom: 38, width: '100%', height: 2, backgroundColor: '#c2998d' }}></div>
            </div>
          </div>
        );

        dataCom = (
          <div className="ranking-list-data">
            {tbodytop3}
            {otherdata.length > 0 ? thead : null}
            {otherdata.length > 0 ? tbody : null}
          </div>
        );
      } else if (styleType == '3') {
        const tbodytop3 = (
          <div className="ranking-list-style3">
            <div className="ranking-list-style3-info" style={{ width: '30%', color: '#ababab' }}>
              <img src={`/spa/portal/images/rankinglist/s03-2.png`} alt="" />
              <ul>{top3data[1] ? top3data[1].map((item, index) => <li key={index}>{item}</li>) : <li>{getLabel(83553, '暂无数据')}</li>}</ul>
            </div>
            <div className="ranking-list-style3-info" style={{ width: '40%', marginTop: -30, color: '#f55a00' }}>
              <img src={`/spa/portal/images/rankinglist/s03-1.png`} alt="" />
              <ul>{top3data[0] ? top3data[0].map((item, index) => <li key={index}>{item}</li>) : <li>{getLabel(83553, '暂无数据')}</li>}</ul>
            </div>
            <div className="ranking-list-style3-info" style={{ width: '30%', color: '#d0916d' }}>
              <img src={`/spa/portal/images/rankinglist/s03-3.png`} alt="" />
              <ul>{top3data[2] ? top3data[2].map((item, index) => <li key={index}>{item}</li>) : <li>{getLabel(83553, '暂无数据')}</li>}</ul>
            </div>
          </div>
        );

        dataCom = (
          <div className="ranking-list-data">
            {tbodytop3}
            {otherdata.length > 0 ? thead : null}
            {otherdata.length > 0 ? tbody : null}
          </div>
        );
      } else if (styleType == '4') {
        dataCom = (
          <div className="ranking-list-data">
            {thead}
            <table className="ranking-list-table-body ranking-list-style4-table">
              {colgroup}
              <tbody>
                {top3data.map((item, index) => {
                  let style = {};
                  if (index == 0) {
                    style = { color: '#fe9227' };
                  } else if (index == 1) {
                    style = { color: '#92abbe' };
                  } else if (index == 2) {
                    style = { color: '#d0916d' };
                  }
                  return (
                    <tr key={index} style={style}>
                      <td>
                        <img src={`/spa/portal/images/rankinglist/s04-${index + 1}.png`} alt="" />
                      </td>
                      {item.map((item, index) => (
                        <td key={index}>{item}</td>
                      ))}
                    </tr>
                  );
                })}
                {otherdata.map((item, index) => (
                  <tr key={index}>
                    <td>
                      <span>{index + 4}</span>
                    </td>
                    {item.map((item, index) => (
                      <td key={index}>{item}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );
      }
    }

    return (
      <div className="content">
        {tabsCom}
        <div className="data">
          <Loading loading={loading}>{dataCom}</Loading>
        </div>
      </div>
    );
  }

  onLoadData = (tab) => {
    const { hpid, subCompanyId, eid, ebaseid } = this.props;
    const { tabid } = tab;
    const params = { hpid, subCompanyId, eid, ebaseid, tabid, tabId: tabid };

    this.setState({ loading: true, tab });
    API_HOMEPAGE.getElementData(params).then((result) => {
      let { styleType, data } = result;
      if (data && typeof data == 'string') {
        // 手动录入的数据
        try {
          data = this.filterData(JSON.parse(data));
        } catch (e) {}
      } else if (data && typeof data == 'object') {
        // 自定义SQL查询的数据
        data = this.filterData(data);
      } else {
        data = [];
      }
      this.setState({ loading: false, styleType, data });
    });
  };

  filterData = (data) => {
    // 删除全是空的行
    const deleteNullRows = (data) => {
      const _data = [];
      for (let i1 = 0, len1 = data.length; i1 < len1; i1++) {
        const v1 = data[i1];
        let isNullRow = true;
        for (let i2 = 0, len2 = v1.length; i2 < len2; i2++) {
          if (v1[i2]) {
            isNullRow = false;
            break;
          }
        }
        if (!isNullRow) {
          _data.push(v1);
        }
      }
      return _data;
    };

    if (data.length > 0) {
      data = deleteNullRows(data); // 删除空行
      if (data.length > 0) {
        data = data[0].map((col, i) => data.map((row) => row[i])); // 列转行
        data = deleteNullRows(data); // 删除空列
        data = data[0].map((col, i) => data.map((row) => row[i])); // 还原
      }
    }

    return data;
  };
}

export default RankingList;
